"use client";

import * as React from "react";

import { ListStyleType, someList, toggleList } from "@platejs/list";
import {
  useIndentTodoToolBarButton,
  useIndentTodoToolBarButtonState,
} from "@platejs/list/react";
import { List, ListOrdered, ListTodoIcon } from "lucide-react";
import { useEditorRef, useEditorSelector } from "platejs/react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/plate/ui/dropdown-menu";

import {
  ToolbarButton,
  ToolbarSplitButton,
  ToolbarSplitButtonPrimary,
  ToolbarSplitButtonSecondary,
} from "./toolbar";

export function BulletedListToolbarButton() {
  const editor = useEditorRef();
  const [open, setOpen] = React.useState(false);

  const pressed = useEditorSelector(
    (editor) =&gt;
      someList(editor, [
        ListStyleType.Disc,
        ListStyleType.Circle,
        ListStyleType.Square,
      ]),
    [],
  );

  return (
    &lt;ToolbarSplitButton pressed={open}&gt;
      &lt;ToolbarSplitButtonPrimary
        className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
        onClick={() =&gt; {
          toggleList(editor, {
            listStyleType: ListStyleType.Disc,
          });
        }}
        data-state={pressed ? "on" : "off"}
      &gt;
        &lt;List className="size-4" /&gt;
      &lt;/ToolbarSplitButtonPrimary&gt;

      &lt;DropdownMenu open={open} onOpenChange={setOpen} modal={false}&gt;
        &lt;DropdownMenuTrigger asChild&gt;
          &lt;ToolbarSplitButtonSecondary /&gt;
        &lt;/DropdownMenuTrigger&gt;

        &lt;DropdownMenuContent align="start" alignOffset={-32}&gt;
          &lt;DropdownMenuGroup&gt;
            &lt;DropdownMenuItem
              onClick={() =&gt;
                toggleList(editor, {
                  listStyleType: ListStyleType.Disc,
                })
              }
            &gt;
              <div>
                <div />
                Default
              </div>
            &lt;/DropdownMenuItem&gt;
            &lt;DropdownMenuItem
              onClick={() =&gt;
                toggleList(editor, {
                  listStyleType: ListStyleType.Circle,
                })
              }
            &gt;
              <div>
                <div />
                Circle
              </div>
            &lt;/DropdownMenuItem&gt;
            &lt;DropdownMenuItem
              onClick={() =&gt;
                toggleList(editor, {
                  listStyleType: ListStyleType.Square,
                })
              }
            &gt;
              <div>
                <div />
                Square
              </div>
            &lt;/DropdownMenuItem&gt;
          &lt;/DropdownMenuGroup&gt;
        &lt;/DropdownMenuContent&gt;
      &lt;/DropdownMenu&gt;
    &lt;/ToolbarSplitButton&gt;
  );
}

export function NumberedListToolbarButton() {
  const editor = useEditorRef();
  const [open, setOpen] = React.useState(false);

  const pressed = useEditorSelector(
    (editor) =&gt;
      someList(editor, [
        ListStyleType.Decimal,
        ListStyleType.LowerAlpha,
        ListStyleType.UpperAlpha,
        ListStyleType.LowerRoman,
        ListStyleType.UpperRoman,
      ]),
    [],
  );

  return (
    &lt;ToolbarSplitButton pressed={open}&gt;
      &lt;ToolbarSplitButtonPrimary
        className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
        onClick={() =&gt;
          toggleList(editor, {
            listStyleType: ListStyleType.Decimal,
          })
        }
        data-state={pressed ? "on" : "off"}
      &gt;
        &lt;ListOrdered className="size-4" /&gt;
      &lt;/ToolbarSplitButtonPrimary&gt;

      &lt;DropdownMenu open={open} onOpenChange={setOpen} modal={false}&gt;
        &lt;DropdownMenuTrigger asChild&gt;
          &lt;ToolbarSplitButtonSecondary /&gt;
        &lt;/DropdownMenuTrigger&gt;

        &lt;DropdownMenuContent align="start" alignOffset={-32}&gt;
          &lt;DropdownMenuGroup&gt;
            &lt;DropdownMenuItem
              onSelect={() =&gt;
                toggleList(editor, {
                  listStyleType: ListStyleType.Decimal,
                })
              }
            &gt;
              Decimal (1, 2, 3)
            &lt;/DropdownMenuItem&gt;
            &lt;DropdownMenuItem
              onSelect={() =&gt;
                toggleList(editor, {
                  listStyleType: ListStyleType.LowerAlpha,
                })
              }
            &gt;
              Lower Alpha (a, b, c)
            &lt;/DropdownMenuItem&gt;
            &lt;DropdownMenuItem
              onSelect={() =&gt;
                toggleList(editor, {
                  listStyleType: ListStyleType.UpperAlpha,
                })
              }
            &gt;
              Upper Alpha (A, B, C)
            &lt;/DropdownMenuItem&gt;
            &lt;DropdownMenuItem
              onSelect={() =&gt;
                toggleList(editor, {
                  listStyleType: ListStyleType.LowerRoman,
                })
              }
            &gt;
              Lower Roman (i, ii, iii)
            &lt;/DropdownMenuItem&gt;
            &lt;DropdownMenuItem
              onSelect={() =&gt;
                toggleList(editor, {
                  listStyleType: ListStyleType.UpperRoman,
                })
              }
            &gt;
              Upper Roman (I, II, III)
            &lt;/DropdownMenuItem&gt;
          &lt;/DropdownMenuGroup&gt;
        &lt;/DropdownMenuContent&gt;
      &lt;/DropdownMenu&gt;
    &lt;/ToolbarSplitButton&gt;
  );
}

export function TodoListToolbarButton(
  props: React.ComponentProps&lt;typeof ToolbarButton&gt;,
) {
  const state = useIndentTodoToolBarButtonState({ nodeType: "todo" });
  const { props: buttonProps } = useIndentTodoToolBarButton(state);

  return (
    &lt;ToolbarButton {...props} {...buttonProps} tooltip="Todo"&gt;
      &lt;ListTodoIcon /&gt;
    &lt;/ToolbarButton&gt;
  );
}
